<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<meta name="viewport" content="width=640px,maximum-scale=1.0, user-scalable=no,target-densitydpi=320" />

<head>
    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.fullPage.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/echarts.common.min.js"></script>


    <script type="text/javascript" src="demo-02.js"></script>
    <link rel="stylesheet" type="text/css" href="font/font.css" />

    <link rel="stylesheet" type="text/css" href="css/demo-02.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
    <script type="text/javascript">
        $(function() {
            $('#dowebok').fullpage({
                afterLoad: function(anchorLink, index) {
                    if (index == 3) {
                        $('.s03').find('p').delay(200).animate({
                            right: '0',
                        }, 1500, 'easeOutExpo');
                        $('.s03').find('#main').fadeIn();
                        $('.s03').find('.bg').delay(800).fadeIn(1000);
                    }
                    if (index == 2) {
                        $('.s02').find('.data').delay(200).animate({
                            marginTop: '80px',
                        }, 800, 'easeOutExpo');
                    }
                    if (index == 4) {
                        $('.s04').find('.foot01').delay(200).fadeIn();
                        $('.s04').find('.foot02').delay(500).fadeIn();
                        $('.s04').find('p').delay(700).animate({
                            bottom: '200px',
                            right: '20px',
                            opacity: '1',
                        }, 500);
                        $('.s04').find('#main2').slideDown();
                        $('.s04').find('.bg').delay(800).animate({
                            backgroundPositionY:'50%',
                        },1000);
                    }
                    if (index == 5) {
                        $('.s05').find('.left').delay(200).animate({
                            left: '20px',
                        });
                        $('.s05').find('.right').delay(200).animate({
                            right: '20px',
                        });
                        $('.s05').find('.bg').delay(800).fadeIn(1500);
                    }
                    if (index == 6) {
                        $('.last').find('.p1').delay(200).fadeIn(1500);
                        $('.last').find('.p2').delay(400).fadeIn(1500);
                        $('.last').find('.p3').delay(600).fadeIn(1500);
                    }
                },
                onLeave: function(index, direction) {
                    if (index == '3') {
                        $('.s03').find('p').animate({
                            right: '-120px',
                        }, 1500, 'easeOutExpo');
                        $('.s03').find('#main').fadeOut('fast');
                        $('.s03').find('.bg').fadeOut('fast');
                    }
                    if (index == '2') {
                        $('.s02').find('.data').animate({
                            marginTop: '250px',
                        }, 1500, 'easeOutExpo');
                    }
                    if (index == '4') {
                        $('.s04').find('.foot01').fadeOut();
                        $('.s04').find('.foot02').fadeOut();
                        $('.s04').find('p').animate({
                            bottom: '-100px',
                            right: '-200px',
                            opacity: '0',
                        });
                        $('.s04').find('#main2').slideUp();
                         $('.s04').find('.bg').animate({
                            backgroundPositionY:'-50%',
                        });
                    }
                    if (index == '5') {
                        $('.s05').find('.left').animate({
                            left: '-200px',
                        }, 100);
                        $('.s05').find('.right').animate({
                            right: '-600px',
                        }, 100);
                        $('.s05').find('.bg').fadeOut();
                    }
                    if (index == '6') {
                        $('.last').find('.p1').fadeOut('fast');
                        $('.last').find('.p2').fadeOut('fast');
                        $('.last').find('.p3').fadeOut('fast');
                    }
                }
            });
        });
    </script>


</head>

<body>
    <div class="xuangua"></div>
    <div id="dowebok">

        <div class="section s01">
            <div class="warp">
                <div class="content">
                    <h1>我的2015阅读单</h1>
                    <h2>看我一年长了多少知识</h2>
                    <div class="pic01"></div>

                </div>




                <div class="footer">
                    <div class="warp2">
                        <div class="tiao1"></div>
                        <div class="tiao2"></div>
                    </div>
                </div>
            </div>
        </div>


        <div class="section s02">
            <div class="warp">
                <div class="content">
                    <div class="user">
                        <div class="touxiang">微信头像</div>
                        <div class="name">
                            <p>微信昵称</p>
                        </div>
                    </div>

                    <table class="data">
                        <tr>
                            <td><img src="img/s02-3-1.png" /></td>
                            <td style="text-align:right;width:250px;">到 馆：</td>
                            <td><b>52</b> 次</td>
                        </tr>
                        <tr>
                            <td><img src="img/s02-2-3.png" /></td>
                            <td style="text-align:right">借 书：</td>
                            <td><b>80</b> 册</td>
                        </tr>
                        <tr>
                            <td><img src="img/s02-3-4.png" /></td>
                            <td style="text-align:right">排 名：</td>
                            <td><b>1300</b> 名</td>
                        </tr>
                        <tr>
                            <td><img src="img/s02-3-5.png" /></td>
                            <td style="text-align:right">通过评测：</td>
                            <td><b>100</b> 册</td>
                        </tr>
                    </table>
                </div>
                <div class="bg"></div>

                <div class="footer">
                    <div class="warp2">
                        <div class="tiao1"></div>
                        <div class="tiao2"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section s03">
            <div class="warp">

                <div class="content">
                    <h1>我的阅读态度：2015月读量</h1>
                    <div id="main"></div>
                    <script>
                        var myChart = echarts.init(document.getElementById('main'));

                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: ''
                            },
                            tooltip: {},
                            legend: {
                                data: ['册数'],
                                textStyle: {
                                    fontSize: '30',
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
                            },
                            yAxis: {},
                            series: [{
                                name: '册数',
                                type: 'line',
                                symbol: 'diamond',
                                symbolSize: '20',
                                data: [5, 20, 80, 8, 10, 20, 5, 6, 1, 0, 12, 16],
                                label: {
                                    normal: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '28',
                                            fontWeight: 'bold',
                                            color: 'white',
                                        },
                                    }
                                }
                            }],


                        };

                        // 显示图表。
                        myChart.setOption(option);
                    </script>

                    <div class="p">
                        <p>书籍使人沉醉</p>
                        <p>&nbsp;&nbsp;使人心灵升华</p>
                    </div>



                </div>
                <div class="bg"></div>



                <div class="footer">
                    <div class="warp2">
                        <div class="tiao1"></div>
                        <div class="tiao2"></div>
                    </div>
                </div>
            </div>


        </div>

        <div class="section s04">
            <div class="warp">
                <div class="content">
                    <h1>我的足迹：2015月到馆记录</h1>
                    <div id="main2"></div>
                    <script>
                        var myChart = echarts.init(document.getElementById('main2'));

                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: ''
                            },
                            tooltip: {},
                            legend: {
                                data: ['次数'],
                                textStyle: {
                                    fontSize: '30',
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
                            },
                            yAxis: {},
                            series: [{
                                name: '次数',
                                type: 'bar',
                                symbol: 'diamond',
                                symbolSize: '20',
                                data: [5, 20, 30, 8, 10, 20, 5, 6, 1, 0, 12, 16],
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            fontSize: '28',
                                            fontWeight: 'bold',
                                            color: 'black',
                                        },
                                    }
                                }
                            }],


                        };

                        // 显示图表。
                        myChart.setOption(option);
                    </script>

                    <div class="foot01"></div>
                    <div class="foot02"></div>
                    <p>没事常来图书馆走走</p>

                </div>
                <div class="bg"></div>


                <div class="footer">
                    <div class="warp2">
                        <div class="tiao1"></div>
                        <div class="tiao2"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section s05">
            <div class="warp">
                <div class="content">
                    <h1>这一年我最稀罕这些书</h1>
                    <div class="five">
                        <div>1.清人文集别录</div>
                        <p>——在我手中停留： <span>140</span> 天</p>
                        <div>2.三国演义</div>
                        <p>——在我手中停留： <span>100</span> 天</p>
                        <div>3.小王子</div>
                        <p>——在我手中停留： <span>80</span> 天</p>
                        <div>4.资治通鉴</div>
                        <p>——在我手中停留： <span>60</span> 天</p>
                        <div>5.汤姆冒险记</div>
                        <p>——在我手中停留： <span>40</span> 天</p>

                    </div>

                    <p class="left">只有书籍</p>

                    <p class="right">能把辽阔的空间和漫长的时间浇灌给你</p>
                    <div class="bg"></div>
                </div>
                <div class="footer">
                    <div class="warp2">
                        <div class="tiao1"></div>
                        <div class="tiao2"></div>
                    </div>
                </div>
            </div>
        </div>



        <div class="section last">
            <div class="warp">
                <div class="content">
                    <div class="zeng">
                        <p class="p1">君子曰：</p>
                        <p class="p2">学不可以已。</p>
                        <p class="p3">继续奋斗吧，同学！</p>
                    </div>
                    <div class="erweima">
                        <img src="img/erweima.jpg" />
                        <p class="p4">更多精彩内容请关注</p>
                        <p class="p5">微信号：CSLNNET</p>
                    </div>

                </div>

                <div class="footer">
                    <div class="warp2">
                        <div class="tiao1"></div>
                        <div class="tiao2"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>








</body>


</html>
